<!DOCTYPE html>
<html lang="en-US" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Aviators - byaviators.com">

    <link href='http://fonts.useso.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
    <link rel="shortcut icon" href="/assets/img/favicon.png" type="image/png">
    <link rel="stylesheet" href="/assets/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="/assets/css/bootstrap-responsive.css" type="text/css">
    <link rel="stylesheet" href="/assets/libraries/chosen/chosen.css" type="text/css">
    <link rel="stylesheet" href="/assets/libraries/bootstrap-fileupload/bootstrap-fileupload.css" type="text/css">
    <link rel="stylesheet" href="/assets/libraries/jquery-ui-1.10.2.custom/css/ui-lightness/jquery-ui-1.10.2.custom.min.css" type="text/css">
    <link rel="stylesheet" href="/assets/css/realia-blue.css" type="text/css" id="color-variant-default">
    <link rel="stylesheet" href="#" type="text/css" id="color-variant">
    <link rel="stylesheet" href="/AdminLTE/bower_components/font-awesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="/AdminLTE/bower_components/Ionicons/css/ionicons.min.css">
    <!-- daterange picker -->
    <link rel="stylesheet" href="/AdminLTE/bower_components/bootstrap-daterangepicker/daterangepicker.css">
    <!-- bootstrap datepicker -->
    <link rel="stylesheet" href="/AdminLTE/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
    <!-- iCheck for checkboxes and radio inputs -->
    <link rel="stylesheet" href="/AdminLTE/plugins/iCheck/all.css">
    <!-- Bootstrap Color Picker -->
    <link rel="stylesheet" href="/AdminLTE/bower_components/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css">
    <!-- Bootstrap time Picker -->
    <link rel="stylesheet" href="/AdminLTE/plugins/timepicker/bootstrap-timepicker.min.css">
    <!-- Select2 -->
    <link rel="stylesheet" href="/AdminLTE/bower_components/select2/dist/css/select2.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/AdminLTE/dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="/AdminLTE/dist/css/skins/_all-skins.min.css">
    <title>酒店辅助订购系统</title>
    <script th:src="@{/js/jquery-3.4.1.min.js}"></script>


    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=zxeyTUYllpRH0EwNEHsjqdnRKbbM70aw"></script>
</head>
<body style="background-color: rgba(238, 238, 238, 1)">
<div id="wrapper-outer" >
    <div id="wrapper">
        <div id="wrapper-inner">
            <!-- BREADCRUMB -->
            <div class="breadcrumb-wrapper">
                <div class="container">
                    <div class="row">
                        <div class="span12">
                            <ul class="breadcrumb pull-left">
                                <li><a href="/hotel/search">主页</a></li>
                            </ul><!-- /.breadcrumb -->

                            <div class="account pull-right">
                                <div th:if="${session.userID} == null">
                                    <ul class="nav nav-pills">
                                        <li><a href="/user/login">登录</a></li>
                                        <li><a href="/user/register">注册</a></li>
                                    </ul>
                                </div>

                                <div th:if="${session.userID} != null">
                                    <ul class="nav nav-pills">
                                        <li><a href="/user">个人信息</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div><!-- /.span12 -->
                    </div><!-- /.row -->
                </div><!-- /.container -->
            </div><!-- /.breadcrumb-wrapper -->

            <!-- HEADER -->


            <!-- NAVIGATION -->

            <!-- CONTENT -->
            <div id="content">
                <div class="container">

                    <div id="main">
                        <div class="row">
                            <div class="span9">
                                <h1 class="page-header">搜索结果</h1>

                                <div class="properties-rows">
                                    <div class="row">




                                        <tr th:each="hotel : ${hotels}">
                                            <form method="post" action="/hotel/detail">
                                                <div class="property span9">
                                                    <div class="row">


                                                        <div class="image span3">
                                                            <div class="content">
                                                                <a th:href= "'detail/'+ ${hotel.hotelid}"></a>
                                                                <img th:src="@{'/assets/img/hotelImg/'+${hotel.cityid}+'/'+${hotel.hotelid}+'.jpg'}" >
                                                            </div><!-- /.content -->
                                                        </div><!-- /.image -->

                                                        <div class="body span6">
                                                            <div class="title-price row" >
                                                                <div class="title span4">
                                                                    <!--                                    <p><span th:text="${hotel.hotelName}"></span></p>-->
                                                                    <h2><a th:href= "'detail/'+ ${hotel.hotelid}" th:text="${hotel.hotelname}"></a></h2>
                                                                </div><!-- /.title -->
                                                                <div class="price" th:text="'¥'+${hotel.hotelprice}">
                                                                    <span>¥</span>
                                                                </div><!-- /.price -->
                                                            </div><!-- /.title -->
                                                            <div class="location" ></div><!-- /.location -->
                                                            <p class="key" th:text="${hotel.province}+${hotel.city}+${hotel.address}"></p>
                                                            <p class="value" th:text="'附近：'+${hotel.landmark}"></p>
                                                            <p class="value" th:text="'星级：'+${hotel.star}"></p>
                                                            <p class="value" th:text="'评分：'+${hotel.score}"></p>
                                                            <div th:if="${hotel.hoteltel} != null">
                                                                <p th:text="'Tel:'+${hotel.hoteltel}"></p>
                                                            </div>


                                                        </div><!-- /.body -->


                                                    </div><!-- /.property -->
                                                </div><!-- /.row -->
                                                <br>
                                                <br>
                                                <br>
                                            </form>
                                        </tr>







                                    </div><!-- /.row -->
                                </div><!-- /.properties-rows -->


                            </div>


                            <div class="sidebar span3">
                                <h2>信息过滤</h2>
                                <div class="property-filter widget">
                                    <div class="content">
                                        <form method="post" action="/hotel/searchdetail">

                                            <div class="location control-group">
                                                <label class="control-label" for="inputLocation">
                                                    最低价
                                                </label>
                                                <input type="text" placeholder="请输入价格" name="pricelow"  >
                                            </div>

                                            <div class="location control-group">
                                                <label class="control-label" for="inputLocation">
                                                    最高价
                                                </label>
                                                <input type="text" placeholder="请输入价格" name="pricehigh" >
                                                <input type="hidden" id="cityName" th:value="${session.cityName}">
                                                <input type="hidden" id="cityID" th:value="5101000">
                                            </div>

                                            <div class="location control-group">
                                                <label class="control-label" for="inputLocation">
                                                    评分不低于
                                                </label>
                                                <div class="controls">
                                                    <select name="score">
                                                        <option id="s5">4.5</option>
                                                        <option id="s4" >4</option>
                                                        <option id="s3" selected>3.5</option>
                                                        <option id="s2">3</option>
                                                        <option id="s6">2</option>
                                                        <option id="s7">1</option>
                                                        <option id="s8">0</option>
                                                    </select>
                                                </div><!-- /.controls -->
                                            </div>

                                            <div class="location control-group">
                                                <label class="control-label" for="inputLocation">
                                                    酒店最低星级
                                                </label>
                                                <div class="controls">
                                                    <select name="star">
                                                        <option id="n5">5</option>
                                                        <option id="n4">4</option>
                                                        <option id="n3" selected>3</option>
                                                        <option id="n2">2</option>
                                                        <option id="n1">1</option>
                                                        <option id="n0">0</option>
                                                    </select>
                                                </div><!-- /.controls -->
                                            </div><!-- /.control-group -->
                                            <div class="form-actions">
                                                <input type="submit" value="点击过滤!" class="btn btn-primary btn-large">
                                            </div><!-- /.form-actions -->
                                        </form>
                                    </div><!-- /.content -->
                                </div><!-- /.property-filter -->
                                <div style="width:300px;height:300px;border:#ccc solid 1px;" id="dituContent"></div>
                            </div>




                        </div>
                    </div>
                </div>

            </div><!-- /#content -->
        </div><!-- /#wrapper-inner -->


    </div><!-- /#wrapper -->
</div><!-- /#wrapper-outer -->
<div id="allmap"></div>



<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=true"></script>
<script type="text/javascript" src="/assets/js/jquery.js"></script>
<script type="text/javascript" src="/assets/js/jquery.ezmark.js"></script>
<script type="text/javascript" src="/assets/js/jquery.currency.js"></script>
<script type="text/javascript" src="/assets/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/assets/js/retina.js"></script>
<script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/assets/js/carousel.js"></script>
<script type="text/javascript" src="/assets/js/gmap3.min.js"></script>
<script type="text/javascript" src="/assets/js/gmap3.infobox.min.js"></script>
<script type="text/javascript" src="/assets/libraries/jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.min.js"></script>
<script type="text/javascript" src="/assets/libraries/chosen/chosen.jquery.min.js"></script>
<script type="text/javascript" src="/assets/libraries/iosslider/_src/jquery.iosslider.min.js"></script>
<script type="text/javascript" src="/assets/libraries/bootstrap-fileupload/bootstrap-fileupload.js"></script>
<script type="text/javascript" src="/assets/js/realia.js"></script>
</body>
</html>

<script type="text/javascript" th:inline="javascript">
    //创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMarker();//向地图中添加marker
    }

    //创建地图函数：
    function createMap(){
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        // var point = new BMap.Point(109.741618,38.290882);//定义一个中心点坐标
        var city=document.getElementById("cityName").value;
        map.centerAndZoom(city,11);//设定地图的中心点和坐标并将地图显示在地图容器中
        map.setZoom(25);
        window.map = map;//将map变量存储在全局
    }

    //地图事件设置函数：
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }

    //地图控件添加函数：
    function addMapControl(){
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
        map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
        var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
        map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
        map.addControl(ctrl_sca);
    }

    //标注点数组
    // var markerArr = [{title:"榆林市",content:"位于陕西最北侧",point:"104.06792346|30.67994285",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
    //     {title:"火车站",content:"位于陕西最北侧",point:"105.06792346|31.67994285",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
    // ];
    var test="123213";
    var markerArr=[[${hotels}]];
    //创建marker
    function addMarker(){
        for(var i=0;i<markerArr.length;i++){
            var json = markerArr[i];
            var p0 = json.longtitude;
            var p1 = json.latitude;
            var point = new BMap.Point(p0,p1);
            var iconImg = createIcon(json.icon);
            var marker = new BMap.Marker(point,{icon:iconImg});
            var iw = createInfoWindow(i);
            var label = new BMap.Label(json.hotelname,{"offset":new BMap.Size(9,-20)});
            marker.setLabel(label);
            map.addOverlay(marker);
            label.setStyle({
                borderColor:"#808080",
                color:"#333",
                cursor:"pointer"
            });

            (function(){
                var index = i;
                var _iw = createInfoWindow(i);
                var _marker = marker;
                _marker.addEventListener("click",function(){
                    // this.openInfoWindow(_iw);
                    //location.href("/hotel/detail/5101000")
                    location.href("/hotel/detail/"+markerArr[index].hotelid.toString());
                });
                _iw.addEventListener("open",function(){
                    _marker.getLabel().hide();
                })
                _iw.addEventListener("close",function(){
                    _marker.getLabel().show();
                })
                label.addEventListener("click",function(){
                    _marker.openInfoWindow(_iw);
                })
                if(!!json.isOpen){
                    label.hide();
                    _marker.openInfoWindow(_iw);
                }
            })()
        }
    }
    //创建InfoWindow
    function createInfoWindow(i){
        var json = markerArr[i];
        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.hotelname + "'>" + json.hotelname + "</b><div class='iw_poi_content'>"+json.address+"</div>");
        return iw;
    }
    //创建一个Icon
    function createIcon(json){
        var icon = new BMap.Icon("/assets/img/icons/bubble-address@2x.png", new BMap.Size(21,21),{imageOffset: new BMap.Size(0,0),infoWindowOffset:new BMap.Size(10,1),offset:new BMap.Size(6,21)})
        return icon;
    }

    initMap();//创建和初始化地图

</script>

<!--var markerArr = [{title:"看这里",content:"位于陕西南北侧",point:"104.06792346|30.67994285",isOpen:1,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},-->
<!--{title:"火车站",content:"位于陕西最北侧",point:"104.06794346|30.67894285",isOpen:1,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}-->
<!--];-->
<!--<script type="text/javascript">-->
<!--    // 百度地图API功能-->
<!--    var map = new BMap.Map("allmap");-->
<!--    var point = new BMap.Point(116.331398,39.897445);-->
<!--    map.centerAndZoom(point,11);-->

<!--    function theLocation(){-->
<!--        var city = document.getElementById("cityName").value;-->
<!--        if(city != ""){-->
<!--            map.centerAndZoom(city,11);      // 用城市名设置地图中心点-->
<!--        }-->
<!--    }-->
<!--</script>-->